<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, maximum-scale = 1, minimum-scale=1" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="width=device-width, maximum-scale = 1, minimum-scale=1" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=0">
		<title>加油站</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />

		<script src="js/mui.min.js"></script>;
		<script src="js/app.js"></script>;
		<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	</head>

	<body>
		<section class="section">
			<div class="top">
				<a class="back mui-action-back "><img src="images/back.png"></a>
				<a class="pro_t">加油站</a>
			</div>
			<div class="clear"></div>
			<div class="pos-top">
				<div style="no-repeat; background-position:top center; height:267px; width:100%; margin:0 auto;" id="banner"> </div>
				<div class="gas_info">
					<p>
						<a id="address"></a>
					</p>
					<a id="gomap" class="r-float gopage"  data-url="map.html">导航></a>
				</div>
				<div class="ypzs">
					<p>— 商品—</p>
					<ul class="qiyou" id="qiyou">

					</ul>

				</div>
				<div class="yhxx-title"><span>优惠信息</span></div>
				<div class="yhxx"><span class="l-float">优惠信息：</span>
					<div style="padding-left:110px;" id="intro">
					</div>
				</div>

			</div>
			<!--底部导航-->
			<div class="clear"></div>
			<div style="height:100px;"></div>
			<div class="foot">
				<input type="button" value="不下车，轻松付油费" href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

			</div>
			<div id="light" class="white_con1">
				<form class="jiner">
					<label>输入金额</label><input type="text">
					<input type="button" value="确定">
				</form>
			</div>
			<div id="fade" class="black_over1"></div>
		</section>
	</body>

</html>
<script>
	(function(mui, doc) {
		mui.init({
			statusBarBackground: '#000000'
		});
		mui("body").on("tap", ".gopage", function() {

			var this_obj = jQuery(this);
			var url = this_obj.data("url");
			var id = this_obj.data("param");
			var latitude = this_obj.data("latitude");
			var longitude = this_obj.data("longitude");
			//  mui.toast(id);
			mui.openWindow({
				id: url,
				url: url,
				extras: {
					data_id: id,
					latitude:latitude,
					longitude:longitude
					
				},
				waiting: {
					autoShow: false,
				}
			})
		});
		mui.plusReady(function() {

			var self = plus.webview.currentWebview();
			var id = self.data_id;

			getGasInfo(id);
			var gomap = document.getElementById("gomap");

			gomap.addEventListener('tap', function(event) {

			}, false);

		});

	}(mui, document));

	function getGasInfo(id) {

		var postData = {
			apiUrl: web_url + "page_gas/gasinfo.shtml",
			datas: {
				gas_id: id
			}
		};
		app.postServer(postData,
			function(result) {

                $("#gomap").attr("data-latitude",result.data.latitude);
                $("#gomap").attr("data-longitude",result.data.longitude);
       
				$("#intro").html(result.data.intro);
				var banner = resource_url + result.data.inside;
				$("#address").html(result.data.address);
				$("#banner").css("background", "url(" + banner + ")");
				//商品html
				var good_html = ""
				$.each(result.data.goods, function(index, item) {
					good_html += '<li>' + item.name + '</li>';
				});

				$("#qiyou").html(good_html);

			},
			function(err) {
				if(err) {
					plus.nativeUI.toast(err);
					return;
				}
			}
		);

	}
</script>